import React, { useEffect, useMemo, useState } from 'react'
import './Order_user.css'
import { Card, Input, NavBar, Notify, Popup, Selector, hooks } from 'react-vant';

import { useLocation, useNavigate } from 'react-router-dom'
import { Arrow } from '@react-vant/icons';
import { createFromIconfontCN } from '@react-vant/icons'
import { useDispatch, useSelector } from 'react-redux';
import { addCart } from '../../redux/cart_reducer';
import axios from 'axios';

const IconFont = createFromIconfontCN(
  '//at.alicdn.com/t/c/font_3954496_ck0gxmmvlyn.js'
)

export default function Order_user() {
  const [state1, setState] = useState('')
  const [state2, setState2] = useState('')
  const dispath = useDispatch()
  const { user: { userObj } } = useSelector(store => store)
  // console.log(userObj);
  const onClose = () => setState('')
  const onClose1 = () => setState2('')
  const navigate = useNavigate()
  const { state: { item, state: { clist, shopData, allprice, allnum } } } = useLocation()
  // console.log(clist, item, shopData);
  console.log(item);
  const allprice1 = useMemo(() => {
    if (item.id == 1) {
      return allprice + 2
    } else if (item.id == 2) {
      return allprice
    } else {
      return allprice
    }
  })
  console.log(allprice1);
  const a = {
    width: '85%',
    margin: '0 auto',
    height: 'inherit',
    boxShadow: "0 0 10px #C1C1C1",
    padding: "20px",
    marginBottom: 20,
    marginTop: 10,
  }
  const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
  const e = {
    width: '85%',
    margin: '0 auto',
    height: 'inherit',
    boxShadow: "0 0 10px #C1C1C1",
    marginBottom: 20,
    marginTop: 10,
    padding: 10

  }
  const [state, updateState] = hooks.useSetState({
    text: '',
    tel: '',
    digit: '',
    num: '',
    password: '',
  })

  useEffect(() => {
    updateState({
      tel: userObj.phone,
    })
  }, [])

  const options = [
    {
      label: '需要餐具',
      value: '1',
    },
    {
      label: '不需要餐具',
      value: '2',
    },
  ]

  const options1 = [
    {
      label: '商家自己提供',
      value: '1',
    },
    {
      label: '1份',
      value: '2',
    },
    {
      label: '2份',
      value: '3',
    },
    {
      label: '更多',
      value: '4',
    },
  ]
  return (
    <div className='order'>
      <div className="pre">
        <NavBar
          title="订单结算"
          leftText=""
          onClickLeft={() => navigate(-1)}
        />
      </div>
      <div className="ce" style={{ width: '100%', }}>

        {/* 骑手送餐 || 堂食  || 打包带走  */}

        {
          item.id == 3 ? <div>
            <Card round style={a}>
              <Card.Body border>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center'
                }}>
                  <div >
                    <h4>图书馆八楼</h4>
                    <p style={{ fontSize: '14px', marginTop: '10px' }}><span>姓名：{userObj.name}</span><span>电话:{userObj.phone}</span></p>

                  </div>

                  <Arrow></Arrow>

                </div>


              </Card.Body>



            </Card>
          </div>
            : <div>
              <Card round style={a}>
                <Card.Body border>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignIstems: 'center' }}>
                    <span>自取窗口：</span> <span>{shopData.address}</span>
                  </div>
                </Card.Body>

                <hr style={{ opacity: 0.5 }} />
                <Card.Body style={{ marginTop: '10px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span>自取时间</span> <span>12：00</span>
                  </div>
                </Card.Body>

                <hr style={{ opacity: 0.5 }} />
                <Card.Body style={{ marginTop: '10px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span>预留电话</span>
                    <span>
                      <Input
                        value={state.tel}
                        type='tel'
                        onChange={tel => updateState({ tel })}
                        placeholder='输入手机号'
                      />
                    </span>
                  </div>
                </Card.Body>
              </Card>
            </div>
        }


      </div>
      <div className="con">
        <Card round style={e}>
          <Card.Body>
            <div>{shopData.name}</div>
          </Card.Body>

          <hr />

          <Card.Body>
            {
              clist.map(item => {
                return <div key={item._id} className='item'>
                  <img src={'/imgs/' + item.path + '.jpg'} style={{ width: '60px', height: '60px' }} alt="" />
                  <div style={{ width: '120px' }}>
                    {item.name}
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around' }}>
                    <span>￥{item.price}</span>
                    <span>x{item.num}</span>
                  </div>
                </div>
              })
            }
          </Card.Body>

          <hr />
          <Card.Body>
            <div style={{
              display: item.id == 1 ? 'flex' : 'none',
              justifyContent: 'space-between',
              fontSize: '14px',
              alignItems: 'center'
            }}>
              <span>餐盒费</span>
              <span>￥2</span>
            </div>

            <div style={{
              fontSize: '14px',
              display: item.id == 2 ? 'flex' : 'none',
              justifyContent: 'right'
            }}>
              共{allnum}件，需支付<span style={{ color: 'red' }}>￥{allprice}</span>
            </div>

            <div style={{
              display: item.id == 3 ? 'block' : 'none',

            }}>
              <p style={{
                display: 'flex',
                justifyContent: 'space-between',
                fontSize: '14px',
                alignItems: 'center',

              }}>
                <span>餐盒费</span>
                <span>￥2</span>
              </p>
              <p style={{
                display: 'flex', justifyContent: 'space-between',
                fontSize: '14px',
                alignItems: 'center',
                marginTop: '10px'
              }}>
                <span>配送费</span>
                <span>￥2</span>
              </p>

              <div style={{ fontSize: '14px', display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
                共{allnum}件，需支付<span style={{ color: 'red' }}>￥{allprice}</span>
              </div>
            </div>
          </Card.Body>
          <Card.Body>
            <p
              style={{
                marginTop: '20px',
                marginBottom: '10px',
                display: 'flex',
                justifyContent: 'space-between',
              }}>
              <span>备注</span>
              <Arrow style={{ fontSize: '15px' }} />
            </p>


            <p style={{
              display: 'flex',
              justifyContent: 'space-between',
            }}>
              <span>餐具</span>
              <span onClick={() => setState('bottom')}>选择餐具<Arrow style={{ fontSize: '15px' }} />
              </span>
            </p>
          </Card.Body>
        </Card>
        <Popup
          round closeable
          visible={state1 === 'bottom'}
          style={{ height: '40%', padding: '10px' }}
          position='bottom'
          onClose={onClose}
        >
          <div>
            <span style={{ marginBottom: '10px' }}>是否需要餐具</span>
            <br />
            <Selector
              style={{ marginTop: '10px' }}

              options={options}
              defaultValue={['1']}
              onChange={(arr, extend) => console.log(arr, extend.items)}
            />
          </div>
          <div style={{ marginTop: "20px" }}>
            <span style={{ marginBottom: '10px' }}>餐具数量</span>
            <br />
            <Selector
              style={{ marginTop: '10px' }}
              options={options1}
              defaultValue={['1']}
              onChange={(arr, extend) => console.log(arr, extend.items)}
            />
          </div>

        </Popup>
      </div>
      <div className='js'>
        <div className='js1'>共￥{allprice}</div>
        <div className='js2' onClick={() => setState2('bottom')}>结算</div>
      </div>
      <Popup
        round
        visible={state2 === 'bottom'}
        style={{ height: '30%' }}
        position='bottom'
        onClose={onClose1}
        closeable
      >
        <h3>选择付款方式</h3>
        <div className='fk'>
          <div className='zhifu'>
            <IconFont name='icon-weixin' style={{ fontSize: '50px' }} />
            <div style={{ width: '200px' }}>
              <h4>
                微信支付
              </h4>
              <p>使用微信支付</p>
            </div>
            <input type="radio" name="e" id="e" />

          </div>

          <div className='zhifu'>
            <IconFont name='icon-zhifupingtai-zhifubao' style={{ fontSize: '50px' }} />
            <div style={{ width: '200px' }}>
              <h4>支付宝支付</h4>
              <p>使用支付宝支付</p>
            </div>
            <input type="radio" name="e" id="e" />
          </div>
          <button id='btn'
            onClick={async () => {
              if (state.tel === '') {
                Notify.show('请输入手机号')
              } else if (!phoneReg.test(state.tel)) {
                Notify.show('请输入正确的手机号')
              } else {
                console.log(allprice, allnum, clist, shopData, item, userObj._id, state);
                // let data = await axios.post('http://47.116.116.42:3000/sunt/add-card', {
                let data = await axios.post('http://localhost:3000/sunt/add-card', {
                  userid: userObj._id,
                  clist,
                  num: allnum,
                  price: allprice,
                  item,
                  way: shopData,
                  phone: Number(state.tel)
                })
                dispath(addCart({ clist, shopData, allprice, allnum, item }))
                navigate('/user/success')
              }
            }}
          >支付<span>￥{allprice}</span></button>
        </div>


      </Popup>
    </div >
  )
}
